﻿function ForecastAnalyse(container, config) {
    this.timepoints = [];
    this.forTime = [];
    this.monitorValue = [];
    this.pollutantName = [];
    this.pubRange = [];

    this.title = config["title"] || null;
    this.subtitle = config["subtitle"] || null;
    this.height = config["height"] || null;
    this.width = config["width"] || null;
    this.xwidth = config["xwidth"] || 60;
    this.title = config["title"] || "";
    this.container = container;
}

ForecastAnalyse.prototype.tooltipFormatter = function (tooltip) {
    var index = tooltip.points[0].point.x;
    var infos = [];
    var pubValue_Low;
    var pubValue_High;
    var monitorValue;
    var ret = '<middle>' + tooltip.x + '</middle><br>';
    ret += '<table>';

    Highcharts.each(tooltip.points, function (point) {
        var series = point.series;
        if (series.name === "预报值") {
            infos.push({ name: series.name, color: series.color });
            pubValue_Low = series.yData[index][0];
            pubValue_High = series.yData[index][1];
        }
        else {
            infos.push({ name: series.name, color: series.color });
            monitorValue = Highcharts.pick(point.point.value, point.y);
        }


    });
    $.each(infos, function (index, info) {
        if (info.name === "预报值") {
            var correctSpan;
            if (typeof (monitorValue) == "undefined" || typeof (pubValue_Low) == "undefined") {
                correctSpan = "";
            }
            else if (monitorValue >= pubValue_Low && monitorValue <= pubValue_High) {
                correctSpan = "<span class='blue '>(准)</span>";

            }
            else {
                correctSpan = "<span class='red'>(不准)</span>";


            }
            //ret += '<tr><td><span style="color:' + info.color + '">\u25CF</span> ' + info.name + '：</td><td>' + pubValue_Low + '~' + pubValue_High + correctSpan + '</td></tr>';
            ret += '<tr><td><span style="color:' + info.color + '">\u25CF</span> ' + info.name + '：</td><td>' + pubValue_Low + '~' + pubValue_High + '</td></tr>';
        }
        else {
            ret += '<tr><td><span style="color:' + info.color + '">\u25CF</span> ' + info.name + '：</td><td>' + monitorValue + '</td></tr>';
        }
    });


    ret += '</table>';

    return ret;

};


ForecastAnalyse.prototype.getStep = function () {
    var _ = this,
        width = $("#" + _.container).width(),
        count = _.timepoints.length,
        num = 1,
        xWidth = _.xwidth;
    while (xWidth * count > width) {
        num = num * 2;
        count = count / 2;
    }
    return num;
}

ForecastAnalyse.prototype.getChartOptions = function () {
    var _ = this;
    return {
        chart: {
            renderTo: _.container,
            height: _.height,
            width: _.width
        },
        title: {
            text: _.title
        },
        subtitle: {
            text: _.subtitle,
            x: 10
        },
        credits: {
            enabled: false
        },
        xAxis: [{
            categories: _.forTime,
            tickInterval: _.getStep()
        }],
        yAxis: {
            min: 0,
            title: {
                text: null
            },

            labels: {
                style: {
                    fontSize: '10px',
                    height: '200px'
                }
            },
            plotLines: [{
                value: 50,
                color: '#00FF00',
                width: 3,
                label: {
                    text: '一级标准限值：50',
                    align: 'left',
                    style: {
                        color: 'gray'
                    }
                }
            }, {
                value: 100,
                color: '#FFFF00',
                width: 3,
                label: {
                    text: '二级标准限值：100',
                    align: 'left',
                    style: {
                        color: 'gray'
                    }
                }
            }, {
                value: 150,
                color: '#FF7E00',
                width: 3,
                label: {
                    text: '三级标准限值：150 ',
                    align: 'left',
                    style: {
                        color: 'gray'
                    }
                }
            }, {
                value: 200,
                color: '#FF0000',
                width: 3,
                label: {
                    text: '四级标准限值：200',
                    align: 'left',
                    style: {
                        color: 'gray'
                    }
                }
            }, {
                value: 300,
                color: '#99004C',
                width: 3,
                label: {
                    text: '五级标准限值：300',
                    align: 'left',
                    style: {
                        color: 'gray'
                    }
                }
            }]
        },
        tooltip: {
            shared: true,
            crosshairs: [
                {
                    width: 1,
                }
            ],
            useHTML: true,

            formatter: function () {
                return _.tooltipFormatter(this);
            }
        },
        series: [{
            name: "监测值",
            type: 'spline',
            color: '#434348',
            data: _.monitorValue,
            zIndex: 1
        }, {
            name: '预报值',
            type: 'arearange',
            color: '#67BDEC',
            data: _.pubRange
        }]
    }
};


ForecastAnalyse.prototype.createChart = function () {
    var _ = this;
    this.chart = new Highcharts.Chart(_.getChartOptions());
    this.chart.series[0].select();
};
ForecastAnalyse.prototype.initData = function (jsonData) {
    var _ = this;
    if (jsonData.length > 0) {
        var d = jsonData;
        for (var i = 0; i < jsonData.length; i++) {
            _.forTime.push(formatDate(GetTimeFromJsonString(d[i].ForTime), "MM月DD日"));
            _.monitorValue.push(d[i].MonitorValue);
            _.pollutantName.push(d[i].PollutantName);
            _.timepoints.push(formatDate(GetTimeFromJsonString(d[i].TimePoint), "MM月DD日"));
            _.pubRange.push([d[i].LowValue, d[i].HighValue]);
        }
        _.createChart();
    }
    else {
        return "no data";
    }
};




